<template>
	<view class="container">
		<u-navbar
			title="支付" 
			:background="{backgroundColor: '#fff'}"
		></u-navbar>
		<view class="content">
			<view class="content_item1">
				<text style="font-size: 28rpx;font-weight: 500;color: #333;">需付金额：</text>
				<text>￥</text>
				<text>{{ option.type==1 ? option.startPrice : option.type==2 ? option.endPrice : '' }}</text>
			</view>
			<view class="content_item2">
				<text>选择支付方式</text>
				<view
					class="line_7_item flex justify-btw align-center"
					v-for="(item,index) in payTypeList"
					:key="index"
					@tap.stop="()=>{ targetType = item.type }"
				>
					<view class="left flex justify-start align-center" style="line-height: 80rpx;">
						<image style="width: 50rpx;height: 50rpx;margin-right: 18rpx;" :src="item.image" mode=""></image>
						<text class="text_5">{{item.name}}</text>
						<text v-if="item.type==2" class="text_10">（余额:￥{{mainStore.userInfo.balance}}）</text>
					</view>
					<image
						style="width: 36rpx;height: 36rpx;" 
						:src="targetType == item.type ? '/static/images/icon_add_select.png' : '/static/images/icon_add_default.png'" 
						mode=""
					></image>
				</view>
				<!-- 对公账户信息 -->
				<block v-if="targetType==3">
					<view class="common_wrapper">
						<view class="info">
							<view 
								style="margin-bottom: 13rpx;" 
								v-for="(item, index) in dicDataList" 
								:key="index"
							>{{ item }}</view>
						</view>
					</view>
					<!-- 22--{{uploadImages}} -->
					<!-- 上传付款凭证 -->
					<u-upload
						ref="uUpload"
						:file-list="fileList"
						action="action"
						:auto-upload="false"
						max-count="1"
						:customBtn="true"
						@on-choose-complete="afterReadImgs($event)"
						@on-remove="onRemove($event)"
					>
						<template v-slot:addBtn>
							<view style="width: 210rpx;height: 210rpx;">
								<image style="width: 100%;height: 100%" src="http://jinjukeji.oss-cn-hangzhou.aliyuncs.com/cardoctor1711508936002.png" mode=""></image>
							</view>
						</template>
					</u-upload>
					<text class="text_80">上传付款凭证</text>
				</block>
			</view>
		</view>
		<view class="saveBtn flex justify-center align-center" @tap.stop="toPay">立即支付</view>
		<!-- 钱包支付确认框 -->
		<u-modal 
			v-model="qbPayShow" 
			@confirm="qbPay()" 
			@cancel="qbPayShow = false" 
			:mask-close-able="true"
			:show-cancel-button="true"
			content="确认使用钱包支付？"
		></u-modal>
		<!-- 对公支付确认框 -->
		<u-modal 
			v-model="commonPayShow" 
			@confirm="commonPay()" 
			@cancel="commonPayShow = false" 
			:mask-close-able="true"
			:show-cancel-button="true"
			content="确认使用对公支付？"
		></u-modal>
	</view>
</template>

<script setup>
import {getCurrentInstance, ref } from 'vue'
import { onLoad, onUnload } from "@dcloudio/uni-app"
import {useMainStore} from '@/store/index.js'
import { uploadFile } from '@/utils/uploadFile.js';
const mainStore = useMainStore()
const {proxy} = getCurrentInstance()
const qbPayShow = ref(false)
const commonPayShow = ref(false)
const queryParams = ref({})
const dicDataList = ref([])  //字典获取的对公账户数据
const option = ref({})
const uploadImages = ref([])
const payTypeList = ref([
	{name:'微信支付', type:'1', image:'/static/images/icon_pay_wx.png'},
	{name:'钱包支付', type:'2', image:'/static/images/icon_pay_yhk.png'},
	{name:'对公账户', type:'3', image:'/static/images/icon_pay_wallet.png'},
])
const targetType = ref('1')

onLoad((opt)=>{
	getCommonInfo()
	option.value = opt
	targetType.value = '1' //默认微信支付
})
function handleClick(){
	
}
function handleSave(){
	if(proxy.utils.isNullOrEmpty(queryParams.value.nickname)){
		proxy.tui.toast('请输入名称')
		return
	}
	proxy.api.updateUserInfo(queryParams.value).then(res=>{
		uni.$emit('changeNameSuccess')
		uni.navigateBack({
			delta: 1
		})
	})
}
// 通过字典获取对公账户信息
function getCommonInfo(){
	proxy.api.system({code: 'corporate_account'}).then(res=>{
		dicDataList.value = res.data.data.map(item=>{
			return `${item.dictLabel}：${item.dictValue}`
		})
	})
}
// 去支付
function toPay(){
	if(!targetType.value){
		proxy.tui.toast("请选择支付方式")
		return
	}else if(targetType.value==1){
		wxPay()
	}else if(targetType.value==2){
		qbPayShow.value = true
	}else if(targetType.value==3){
		commonPayShow.value = true
	}
	
}
// 微信支付
function wxPay() {
	let parmas = {
		id: option.value.id,
		voucher:'',
		type: 1, //1微信 2钱包 3对公账户
		price: option.value.type==1 ? option.value.startPrice : option.value.type==2 ? option.value.endPrice : '',
	};
	// option.type 1首款 2尾款
	let payApi = option.value.type==1 ? proxy.api.payStartOrder 
				: option.value.type==2 ? proxy.api.payEndOrder 
				: ''
	payApi(parmas).then(res => {
		console.log('支付参数 ', res.data)
		let parmas = {
			
			provider: 'wxpay',
			timeStamp: res.data.data.timeStamp,
			nonceStr: res.data.data.nonceStr,
			package: res.data.data.package,
			signType: res.data.data.signType,
			paySign: res.data.data.paySign
		};
		console.log('参数', parmas)
		uni.requestPayment({
			...parmas,
			success: result => {
				uni.$emit('paySuccess')
				mainStore.handleGetUserInfo()
				setTimeout(() => {
					uni.switchTab({
						url:"/pages/order/order"
					})
				},800)
				
			},
			fail: error => {
				proxy.tui.toast("已取消支付");
			}
		});
	});
}
// 执行上传
function handleUpload(e) {
	console.log('eee',e)
	uploadFile({
		filePath: e.file.path,
		dir: 'image/',
		name: 'file'
	}).then(res => {
		uploadImages.value.push(res);
		console.log('图片地址', uploadImages.value)
	}).catch(err => {
	});
	// queryParams.value.avatar = e.detail.avatarUrl
}
// 执行上传
// function uploadDo(item) {
// 	uni.uploadFile({
// 		url: actionUrl.value,
// 		filePath: item.file.path,
// 		name: 'file',
// 		success(res) {
// 			const { data } = JSON.parse(res.data);
// 			uploadImages.value.push(data.url);
// 			console.log(uploadImages.value);
// 		}
// 	});
// }
function afterReadImgs(e, type) {
	uploadImages.value = [];
	e.map(item => {
		if (item.file) {
			console.log('tup',item.file);
			handleUpload(item);
		}
	});
}

// 删除图片
function onRemove(e, type) {
	uploadImages.value.splice(e, 1);
}
// 钱包支付
function qbPay() {
	let parmas = {
		voucher:'',
		id: option.value.id,
		type: 2, //1微信 2钱包 3对公账户
		price: option.value.type==1 ? option.value.startPrice : option.value.type==2 ? option.value.endPrice : '',
	};
	// option.type 1首款 2尾款
	let payApi = option.value.type==1 ? proxy.api.payStartOrder
				: option.value.type==2 ? proxy.api.payEndOrder
				: ''
	payApi(parmas).then(res => {
		console.log('支付res', res)
		if(res.data.code==200){
			uni.$emit('paySuccess')
			mainStore.handleGetUserInfo()
			uni.switchTab({
				url:"/pages/order/order"
			})
		}
	});
}
// 对公账户支付
function commonPay() {
	if(uploadImages.value.length==0){
		return proxy.tui.toast('请上传付款凭证')
	}
	let parmas = {
		voucher: uploadImages.value[0],
		id: option.value.id,
		type: 3, //1微信 2钱包 3对公账户
		price: option.value.type==1 ? option.value.startPrice : option.value.type==2 ? option.value.endPrice : '',
	};
	// option.type 1首款 2尾款
	let payApi = option.value.type==1 ? proxy.api.payStartOrder
				: option.value.type==2 ? proxy.api.payEndOrder
				: ''
	payApi(parmas).then(res => {
		console.log('支付res', res)
		if(res.data.code==200){
			uni.$emit('paySuccess', 'common')
			mainStore.handleGetUserInfo()
			uni.switchTab({
				url:"/pages/order/order"
			})
		}
	});
}

</script>

<style lang="scss" scoped>
	::v-deep .u-upload{
		padding-left: 54rpx !important;
		margin-top: 28rpx;
	}
	.text_10{
		@include str(26rpx, bold, $uni-color-primary);
	}
	.text_80{
		@include str(26rpx, bold, #b0b0b0);
		margin-left: 70rpx;
		position: relative;
		top: 10rpx;
	}
	.saveBtn{
		width: 690rpx;
		height: 80rpx;
		background: $uni-color-primary;
		border-radius: 50rpx;
		@include str(32rpx, bold, #fff);
		line-height: 45rpx;
		margin-top: 200rpx;
		margin-left: 30rpx;
	}
	.container {
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		background-color: $uni-bg-color-grey;

		.content {
			width: 100vw;
			&>view{
				width: 710rpx;
				box-sizing: border-box;
				margin-left: 20rpx;
				padding:32rpx 30rpx;
				background-color: #fff;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
				margin-top: 20rpx;
			}
			&_item1{
				@include str(30rpx, bold, #f00);
				line-height: 42rpx;
			}
			&_item2{
				
			}
		}
	}
	.common_wrapper{
		width: 500rpx;
		background-color: #dceeff;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 20rpx; 
		@include str(24rpx, 500, #333);
		line-height: 33rpx;
		margin-left: 60rpx;
		.info>view:last-child{
			margin-bottom: 0 !important;
		}
	}
</style>